<script setup>
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { useStore } from 'vuex';
// import Zoomer from '@/components/zoomer/index.vue';
import Zoomer from 'yu-zoomer';
// import AreaSelect from

const store = useStore();
const route = useRoute();

// route.params.id

const goodsDetail = computed(() => store.state.goods.goodsDetail);

const filter = ref([]);
async function init(to) {
  await store.dispatch('goods/updateGoodsDetail', to.params.id);
  filter.value = goodsDetail.value.specs.map((s) => ({
    name: s.name,
    value: [],
    disabled: s.values.map(() => false),
  }));
}

// 初始化请求
init(route);
// 路由守卫
// 路由id变化时, 重新请求
onBeforeRouteUpdate(init);

store.dispatch('area/updateAreaList');

const areaList = computed(() => store.state.area.areaList);

// 选其中一个的时候
function onFilterChange(checkes, currentIndex) {
  const [v = ''] = checkes.slice(-1);

  if (!v) {

  }

  filter.value[currentIndex].value = v ? [v] : [];

  // label: 颜色
  // name: 黑色
  const [label, vname] = v.split(':::');
  const { skus } = goodsDetail.value;

  // filter的数组项 { name, value, disabled }
  // name: 颜色  value: 黑色
  filter.value = filter.value.map((f, i) => {
    console.log(f);

    if (f.name === label) {
      return f;
    }

    // f.name: 尺码
    return {
      ...f,
      // i: 0, 1, 2
      disabled: goodsDetail.value.specs[i].values.map(({ name }) => {
        // name: 110cm
        return !skus.some((sku) =>
          // 已选中
          sku.specs.some((spec) => spec.name === label && spec.valueName === vname) &&
          // 尺码: 110cm
          sku.specs.some((spec) => spec.name === f.name && spec.valueName === name));
      }),
    };
  });
}

const hasNext = computed(() => store.state.area.hasNext);

function onSelect(code) {
  store.dispatch('area/getAreaChildren', code);
}

function onFocus() {
  store.dispatch('area/updateAreaList');
}

const area = ref(['北京', '北京市', '东城区']);

</script>

<template>

  <area-select
    v-model="area"
    @change=""
    @blur=""
    @focus="onFocus"
    @select="onSelect"
    :has-next="hasNext"
  >
    <area-option
      v-for="area in areaList"
      :key="area.code"
      :value="area.code"
      :name="area.name"
    >
      {{ area.name }}
    </area-option>
  </area-select>

  <zoomer
    class="goods-detail-zoomer"
    img-src="https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg"
  />

  <el-form>
    <el-form-item
      v-for="(_, i) in filter"
      :key="goodsDetail.specs[i].id"
      :label="goodsDetail.specs[i].name"
    >
      <el-checkbox-group
        :model-value="filter[i].value"
        @change="(checkes) => onFilterChange(checkes, i)"
      >
        <el-checkbox
          v-for="(value, j) in goodsDetail.specs[i].values"
          :key="value.name"
          :label="`${ goodsDetail.specs[i].name }:::${ value.name }`"
          :disabled="filter[i].disabled[j]"
        >
          {{ value.name }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>

</template>

<style lang="scss" scoped>
.goods-detail-zoomer {
  width: 400px;
  height: 400px;
  margin: 150px;
  // margin-bottom: 9999px;
}

.radio {
  // background-color: red;
}
</style>
